<template>
<span class="headerAvatar">
    <template v-if="picType === 'avatar'">
      <el-avatar v-if="userInfo.headerImg" :size="30" :src="avatar" />
      <el-avatar v-else :size="30" :src="noAvatar" />
    </template>
    <template v-if="picType === 'img'">
      <img v-if="userInfo.headerImg" :src="avatar" class="avatar">
      <img v-else :src="noAvatar" class="avatar">
    </template>
    <template v-if="picType === 'file'">
      <img :src="file" class="file">
    </template>
  </span>
</template>
<script setup>
import {ref,computed} from "vue";
import {useUserStore} from "@/pinia/index.js";
const userInfo = useUserStore().userInfo
const path = import.meta.env.VITE_BASE_API
const props = defineProps({
  picType:String,
  picSrc: String
})
const noAvatar = ref("")

const avatar = computed(()=> {
  if (props.picSrc === '') {
    if (userInfo.headerImg !== '' && userInfo.headerImg.slice(0,4) === 'http') {
      return userInfo.headerImg
    }
    return path + '/' + userInfo.headerImg
  }else {
    if (props.picSrc !== '' && props.picSrc.slice(0,4) === 'http') {
      return props.picSrc
    }
    return path + props.picSrc
  }
})
const file = computed(()=> {
  if (props.picSrc && props.picSrc.slice(0,4) !== 'http') {
    return path + props.picSrc
  }
  return props.picSrc
})
</script>

<style scoped>
.headerAvatar{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}
.file{
  width: 80px;
  height: 80px;
  position: relative;
}
</style>
